import { useState } from "react";

interface AddTodoProps {
    addTodo: (text: string) => void
}

function AddTodo ({addTodo}: AddTodoProps) {
    const [text, setText] = useState('')
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        if (text.trim() === '') {
            return 
        }
        addTodo(text)
        setText('')
    }
    return (
        <form onSubmit={handleSubmit} className="flex gap-2 mb-6 w-full">
            <input
             type="text"
             value={text}
             onChange={(e) => setText(e.target.value)}
             className="flex-1 px-4 py-2 rounded-md bg-purple-900/30 border border-purple-400/30 text-purple-100 placeholder-purple-300/50 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
             placeholder="添加新任务..."
              />
            <button className="bg-purple-700 hover:bg-purple-600 text-purple-100 px-4 py-2 rounded-md transition-colors">提交</button>
        </form>
    )
}
export default AddTodo;